iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記 系列 第 25

初探JavaScript - JS 三種彈跳視窗(Popup)的寫法

  • 分享至 

  • xImage
  •  

JavaScript有三種形式的彈跳視窗(Popup),分別是:
Alert Box:window.alert()
Confirm BoxWindow.confirm()
Prompt Box : window.prompt()

以上window可省略

  • Alert Box

Alert的彈跳視窗經常被使用在,當想要跟使用者確認資訊,則可使用Alert Box,使用者可按「確認」後繼續。

語法:window.alert("彈跳視窗想要顯示的文字");

範例:
https://ithelp.ithome.com.tw/upload/images/20200925/20115106HItitV8RuZ.png

  • Confirm Box

Confirm Box經常被使用在,當我們想要使用者認證或是接受一些事情,則會使用Confirm Box,當彈跳視窗顯示,使用者可以選擇「確認」或「取消」,當點選「確認」,box會回傳true,當點選「取消」box會回傳false

語法:window.confirm("彈跳視窗想要顯示的文字");

範例:

    <h1>我在測試Confirm Box</h1>
    <input class='popuptest' type="button" value="按我">
    <p class='show'></p>

    <script>
        var button = document.querySelector('.popuptest');
        var showtxt = document.querySelector('.show');

        function popup2(e) {
            window.confirm('ConfirmBox測試成功嗎');
            if (confirm('ConfirmBox測試成功嗎') == true) {
                showtxt.innerHTML = 'Yes,測試成功';
            } else {
                showtxt.innerHTML = '您已取消確認';
            }

        };
        button.addEventListener('click', popup2);
    </script>

點選網頁「按我」按鈕結果:
https://ithelp.ithome.com.tw/upload/images/20200925/20115106L2n4j8nsZp.png

點選「確認」執行結果:
https://ithelp.ithome.com.tw/upload/images/20200925/20115106Q1TwXNeiJk.png

點選「取消」執行結果:
https://ithelp.ithome.com.tw/upload/images/20200925/20115106tsdHct1jjr.png

  • Prompt Box

Prompt的彈跳視窗經常被使用在,當使用者在進入網頁頁面前,彈跳出需要輸入值得狀況,當輸入完成後,必須點選點選「確認」或「取消」以繼續執行。若是點選Prompt彈跳視窗中的「確認」則會回傳輸入值;若是點選「取消」則會回傳null

語法:window.prompt("要在彈跳視窗顯示的文字","輸入格的預設t");

範例:

    <h1>我在測試Prompt Box</h1>
    <input class='prompttest' type="button" value="按我">
    <p class='show'></p>

    <script>
        var button = document.querySelector('.prompttest');
        var showtxt = document.querySelector('.show');

        function popup3(e) {
            var guest = window.prompt('您好!請輸入您的姓名', '迪迪希');
            if (guest == null || "") {
                showtxt.innerHTML = '您已取消輸入'
            } else {
                showtxt.innerHTML = 'Good Day' + guest + '^^'
            }

        }
        button.addEventListener('click', popup3);
    </script>

點選網頁「按我」按鈕結果:
https://ithelp.ithome.com.tw/upload/images/20200925/20115106ZZnCszjTAK.png

輸入名字並點選「確認」執行結果:
https://ithelp.ithome.com.tw/upload/images/20200925/201151060opk3S0Da7.png

未輸入,點選「取消」執行結果:
https://ithelp.ithome.com.tw/upload/images/20200925/20115106E7RozmlBMw.png

資料參考來源:w3shool.com


上一篇
初探JavaScript - 『回到上一頁』和『列印』功能寫法
下一篇
初探JavaScript - 時間事件(Time Events) - 依設定的時間區間執行程式
系列文
「 Nice to meet you , JavaScript . 」- 學習日記 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言